<template>
  <div>
    <z-space vertical>
      <z-view-mode :gutter="10"
                   :iconOptions="iconOptions"
                   :modeList="modeList" :otherIconOptions="otherIconOptions"
                   :pagination="{page:1,limit:10}"
                   :props="props"
                   :span="4"
                   :topStatus="topStatus"
                   @currentChange="currentChange"
                   @triggerIcons="triggerIcons"
                   @triggerStatus="triggerStatus"
      >
        <div slot="content">
          <div style="font-size: 15px">测试内容</div>
          <div style="font-size: 15px">测试内容</div>
          <div style="font-size: 15px">测试内容</div>
          <div style="font-size: 15px">测试内容</div>
        </div>
      </z-view-mode>
    </z-space>
    <vue-code-mirror :js="d3.js" :tpl="d3.tpl"></vue-code-mirror>

    <h3>视图参数</h3>
    <doc-props :data="doc.props"></doc-props>
    <h3>事件配置</h3>
    <doc-props :data="doc.props3"></doc-props>
  </div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";

export default {
  components: {DocProps, VueCodeMirror},
  data() {
    return {

      d3: {
        tpl: `        <z-view-mode :gutter="20"
                     :iconOptions="iconOptions"
                     :pagination="{page:1,limit:10}"
                     :modeList="modeList" :otherIconOptions="otherIconOptions"
                     :span="6"
                     :topStatus="topStatus"
                     @triggerIcons="triggerIcons"
                     @triggerStatus="triggerStatus">
        <div slot="content">
          <div>测试内容</div>
          <div>测试内容</div>
          <div>测试内容</div>
          <div>测试内容</div>
        </div>
      </z-view-mode>`,
        js: `         data(){
              return {
              //底部按钮显示内容，属性不可传
                 iconOptions: [
                    {
                      icon: 'el-icon-plus',
                      tooltip: '编辑'
                    },
                    {
                      icon: 'el-icon-s-promotion',
                      tooltip: '转发'
                    }, {
                      icon: 'el-icon-s-tools',
                      tooltip: '设置'
                    }, {
                      icon: 'el-icon-share',
                      tooltip: '分享'
                    },
                  ],
              //数据列表
                 modeList:[
                    {
                    code: 120,
                    title: "任务1任务1任务1任务1任务1任务1",
                    des: "任务的内容任务的内容任务的内容任务的内容任务的",
                    status: "1",
                    statuscolor: '#ff7551',
                    statusTitle: '异常'
                  },
                  {
                    code: 121,
                    title: "任务1任务1任务1任务1任务1任务1任务1任务1",
                    status: "2",
                    des: "任务的内容任务的内容任务的内容任务的内容任",
                    statuscolor: '#2dc265',
                    statusTitle: '正常'

                  },
                 ],
                 //其它按钮显示
                 otherIconOptions: [
                  {
                    icon: 'el-icon-bell',
                    tooltip: '编辑'
                  }
                ],
                //顶部状态筛选按钮
                topStatus: [
                  {
                    status: '1',
                    color: '#ff7551',
                    size: 'small',
                    text: '异常',
                  },
                  {
                    status: '2',
                    color: '#2dc265',
                    size: 'small',
                    text: '正常',

                  },
                  {
                    status: '3',
                    color: '#4e6ff0',
                    size: 'small',
                    text: '完结',
                  },
                  {
                    status: '4',
                    color: '#ffc208',
                    size: 'small',
                    text: '预警',
                  },
                  {
                    status: '5',
                    color: '#9b9b9b',
                    size: 'small',
                    text: '初始',
                  },
                ],
              }
            },
            methods:{
              //触发顶部按钮方法
              triggerStatus(item) {
                  console.log(item)
                  this.$message.info(item.text)
                },
              //触发底部icon方法
                triggerIcons(item) {
                  console.log(item)
                  this.$message.info(item.tooltip)
                },
               //分页
               currentChange(page){
                  console.log(page)
                  this.$message.info(page)
               }
            }
            `
      },
      doc: {
        props: [
          {
            name: 'gutter',
            type: 'Number',
            defVal: '20',
            desc: '视图卡片间距',
          },
          {
            name: 'span',
            type: 'Number',
            defVal: '6',
            desc: '一行放几个，24栅格，6为一行4个',
          },
          {
            name: 'iconOptions',
            type: 'Array',
            defVal: '[{\n' +
                '          icon: \'el-icon-plus\',\n' +
                '          tooltip: \'编辑\'\n' +
                '        },\n' +
                '        {\n' +
                '          icon: \'el-icon-s-promotion\',\n' +
                '          tooltip: \'转发\'\n' +
                '        }, {\n' +
                '          icon: \'el-icon-s-tools\',\n' +
                '          tooltip: \'设置\'\n' +
                '        }, {\n' +
                '          icon: \'el-icon-share\',\n' +
                '          tooltip: \'分享\'\n' +
                '        },]',
            desc: '底部按钮配置列表',
          },
          {
            name: 'modeList',
            type: 'Array',
            defVal: '[]',
            desc: '数据展示列表',
          },
          {
            name: 'topStatus',
            type: 'Array',
            defVal: '[{\n' +
                '          type: \'primary\',\n' +
                '          text: \'完结\'\n' +
                '        },\n' +
                '        {\n' +
                '          type: \'success\',\n' +
                '          text: \'正常\'\n' +
                '        },\n' +
                '        {\n' +
                '          type: \'info\',\n' +
                '          text: \'初始\'\n' +
                '        },\n' +
                '        {\n' +
                '          type: \'warning\',\n' +
                '          text: \'预警\'\n' +
                '        },\n' +
                '        {\n' +
                '          type: \'danger\',\n' +
                '          text: \'异常\'\n' +
                '        },]',
            desc: '顶部按钮状态列表',
          },
          {
            name: 'pagination',
            type: 'Object',
            defVal: '{page:1,limit:10}',
            desc: '分页参数',
          },

        ],
        props3: [
          {
            name: 'triggerIcons',
            type: 'Function',
            defVal: '',
            desc: '底部icon触发方法',
          },
          {
            name: 'triggerStatus',
            type: 'Function',
            defVal: '',
            desc: '顶部按钮触发方法',
          },
        ]
      },
      iconOptions: [
        {
          icon: 'el-icon-plus',
          tooltip: '编辑'
        },
        {
          icon: 'el-icon-s-promotion',
          tooltip: '转发'
        }, {
          icon: 'el-icon-s-tools',
          tooltip: '设置'
        }, {
          icon: 'el-icon-share',
          tooltip: '分享'
        },
      ],
      topStatus: [
        {
          status: '1',
          color: '#ff7551',
          size: 'small',
          text: '异常',
        },
        {
          status: '2',
          color: '#2dc265',
          size: 'small',
          text: '正常',

        },
        {
          status: '3',
          color: '#4e6ff0',
          size: 'small',
          text: '完结',
        },
        {
          status: '4',
          color: '#ffc208',
          size: 'small',
          text: '预警',
        },
        {
          status: '5',
          color: '#9b9b9b',
          size: 'small',
          text: '初始',
        },
      ],
      modeList: [
        {
          codeNum: 120,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1任务1",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          status: "1",
          statuscolor: '#ff7551',
          statusTitle: '异常'
        },
        {
          codeNum: 121,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1",
          status: "2",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          statuscolor: '#2dc265',
          statusTitle: '正常'

        },
        {
          codeNum: 122,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1",
          status: "3",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          statuscolor: '#4e6ff0',
          statusTitle: '完结'

        },
        {
          codeNum: 123,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1",
          status: "4",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          statuscolor: '#ffc208',
          statusTitle: '预警'

        },
        {
          code: 124,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1",
          status: "5",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          statuscolor: '#9b9b9b',
          statusTitle: '初始'
        },
        {
          code: 125,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1",
          status: "5",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          statuscolor: '#9b9b9b',
          statusTitle: '初始'
        },
        {
          code: 126,
          name: "任务1任务1任务1任务1任务1任务1任务1任务1",
          status: "5",
          des: "任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容任务的内容",
          statuscolor: '#9b9b9b',
          statusTitle: '初始'
        }
      ],
      otherIconOptions: [
        {
          icon: 'el-icon-bell',
          tooltip: '编辑'
        }
      ],
      props: {code: 'codeNum', title: 'name'}
    }
  },
  mounted() {

  },
  methods: {
    triggerStatus(item) {
      console.log(item)
      this.$message.info(item.text)
    },
    triggerIcons(item) {
      console.log(item)
      this.$message.info(item.tooltip)
    },
    currentChange(page) {
      console.log(page)
      this.$message.info(page)
    },

  }
}
</script>
